<template>
	<breadCrumb ref="breadCrumb1" :item="item"></breadCrumb>
	<div class="common-wrapped">
		<!-- 内容 -->
		<div class="common-content">
			<el-tabs v-model="activeName" class="demo-tabs">
				<el-tab-pane label="账号详情" name="first">
					<div class="account-info-wrapped">
						<span>用户头像：</span>
						<div class="account-info-content">
							<!-- action 是上传头像的接口 -->
							<el-upload class="avatar-uploader" action="http://127.0.0.1:3007/user/uploadAvatar"
								:show-file-list="false" :on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload">
								<img v-if="userStore.imageUrl" :src="userStore.imageUrl" class="avatar" />
								<el-icon v-else class="avatar-uploader-icon">
									<Plus />
								</el-icon>
							</el-upload>
						</div>
					</div>
					<div class="account-info-wrapped">
						<span>用户账号：</span>
						<div class="account-info-content">
							<el-input v-model="userData.account" disabled></el-input>
						</div>
					</div>
					<div class="account-info-wrapped">
						<span>用户密码：</span>
						<div class="account-info-content">
							<el-button type="primary" @click="openChangePassword">修改密码</el-button>
						</div> 
					</div>
					<div class="account-info-wrapped">
						<span>用户姓名：</span>
						<div class="account-info-content">
							<el-input v-model="userData.name"></el-input>
						</div>
						<div class="account-save-button">
							<el-button type="primary" @click="saveName">保存</el-button>
						</div>
					</div>
					<div class="account-info-wrapped">
						<span>用户性别：</span>
						<div class="account-info-content">
							<el-select v-model="userData.sex" style="120px">
								<el-option label="男" value="男" />
								<el-option label="女" value="女" />
							</el-select>
						</div>
						<div class="account-save-button">
							<el-button type="primary" @click="saveSex">保存</el-button>
						</div>
					</div>
					<div class="account-info-wrapped">
						<span>用户身份：</span>
						<div class="account-info-content">
							<el-input v-model="userData.identity" disabled></el-input>
						</div>
					</div>
					<div class="account-info-wrapped">
						<span>用户部门：</span>
						<div class="account-info-content">
							<el-input v-model="userData.department" disabled></el-input>
						</div>
					</div>
					<div class="account-info-wrapped">
						<span>用户邮箱：</span>
						<div class="account-info-content">
							<el-input v-model="userData.email"></el-input>
						</div>
						<div class="account-save-button">
							<el-button type="primary" @click="saveEmail">保存</el-button>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="公司信息" name="second">
					<div class="account-info-wrapped">
						<span>公司名称</span>
						<div class="account-info-content">
							<el-input v-model="companyName"></el-input>
						</div>
						<div class="account-save-button">
							<el-button type="primary" @click="resetCompanyName">编辑公司名称</el-button>
						</div>
					</div>
					<div class="account-info-wrapped">
						<span>公司介绍</span>
						<div class="account-info-content">
							<el-button type="success" @click="openEditor(1)">编辑公司介绍</el-button>
						</div>
					</div>
					<div class="account-info-wrapped">
						<span>公司架构</span>
						<div class="account-info-content">
							<el-button type="success" @click="openEditor(2)">编辑公司介绍</el-button>
						</div>
					</div>
					<div class="account-info-wrapped">
						<span>公司战略</span>
						<div class="account-info-content">
							<el-button type="success" @click="openEditor(3)">编辑公司介绍</el-button>
						</div>
					</div>
					<div class="account-info-wrapped">
						<span>公司高层</span>
						<div class="account-info-content">
							<el-button type="success" @click="openEditor(4)">编辑公司介绍</el-button>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="首页管理" name="third">
					<div class="home-wrapped">
						<!-- 提示 -->
						<div class="tips">
							<span>
								提示: 点击图片框进行切换首页轮播图
							</span>
						</div>
						<!-- 轮播图 -->
						<div class="swiper-wrapped" v-for="(item,index) in imageUrl" :key="index">
							<div class="swiper-name">轮播图{{index+1}}:&nbsp;&nbsp;</div>
							<el-upload class="avatar-uploader" action="http://127.0.0.1:3007/set/uploadSwiper"
								:show-file-list="false" :on-success="handleSwiperSuccess"
								:before-upload="beforeAvatarUpload" :data='item'>
								<template #trigger>
									<!-- {{imageUrl[index]}} -->
									<img  v-if="item" :src="item" class="swiper" />
									<img src="@/assets/xbt.png" alt="" v-else>
								</template>
							</el-upload>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="其他设置" name="fourth"></el-tab-pane>
			</el-tabs>
		</div>
	</div>
	<changeP ref="changePw"></changeP>
	<editorP ref="editorPw"></editorP>
</template>

<script lang="ts" setup>
	import breadCrumb from "@/components/bread_crumb.vue"
	import { ref,reactive, onMounted } from "vue"
	import { ElMessage,ElTabs,ElInput } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	import type { UploadProps } from 'element-plus'
	import { bus } from "@/utils/mitt.js"
	import { userUserInfor } from "@/store/userinfor.js"
	import { bindAccount, changeName, changeSex, changeEmail,getUserInfor } from "@/api/userinfor.js"
	import { getAllSwiper,getCompanyName, changeCompanyName, getCompanyIntroduce, changeCompanyIntroduce,getAllCompanyIntroduce } from "@/api/setting.js"
	import changeP from "./componets/change_password.vue"
	import editorP from "./componets/editor.vue"
	
	
	const changePw = ref();
	
	const userStore = userUserInfor()
	
	
	
	// 面包屑
	const breadcrumb1 = ref()
	// 面包屑参数
	const item = ref({
		first: '系统设置',
	})
	// 默认打开的标签页
	const activeName = ref('first')

	const userData = reactive({
		account:"",
		name:"",
		sex:"",
		email:"",
		identity:"",
		department:"",
	})
	// 页面初始化加载
	onMounted(async ()=>{
		const res = await getUserInfor(userStore.id)
		const data = res.data[0]
		userData.account = data.account
		userData.name = data.name
		userData.sex = data.sex
		userData.identity = data.identity
		userData.department = data.department
		userData.email = data.email
	})
	
	
	
	const handleAvatarSuccess:UploadProps['onSuccess'] = (response,uploadFile)=>{
		console.log(response)
		if(response.status == 0){
			userStore.$patch({
				imageUrl:response.url
			});
			ElMessage({
				message:"更新头像成功！",
				type:"success"
			}),
			// 头像地址和账号绑定
			(async ()=>{
				const res = await bindAccount(userStore.account,response.onlyId,response.url)
			})()
			
		}else{
			ElMessage.error("更新头像失败！请重新上传")
		}
	}
	const beforeAvatarUpload = ()=>{
		
	}
	const openChangePassword = ()=>{
		changePw.value.open();
	}
	const saveName = async ()=>{
		const res = await changeName(userData.name,userStore.id);
		if(res.data.rules == 1){
			ElMessage.error("更新姓名失败！")
		}else{
			ElMessage({
				message:"更新姓名成功！",
				type:"success"
			})
			userUserInfor.$patch({
				name:userData.name
			})
		}
	}
	const saveSex = async ()=>{
		const res = await changeSex(userData.sex,userStore.id);
		if(res.data.rules == 1){
			ElMessage.error("更新性别失败！")
		}else{
			ElMessage({
				message:"更新性别成功！",
				type:"success"
			})
			userUserInfor.$patch({
				sex:userData.sex
			})
		}
	}
	const saveEmail = async ()=>{
		const res = await changeEmail(userData.email,userStore.id);
		if(res.data.rules == 1){
			ElMessage.error("更新邮箱失败！=")
		}else{
			ElMessage({
				message:"更新邮箱成功！",
				type:"success"
			})
			userUserInfor.$patch({
				email:userData.email
			})
		}
	}
	// 公司信息
	const companyName = ref('');
	// 获取公司名称
	const getCompanyNames = async () => {
		companyName.value = (await getCompanyName()).data.result[0].set_value;
	}
	getCompanyNames();
	// 修改公司名称
	const resetCompanyName = async () => {
		let res = await changeCompanyName(companyName.value)
		if(res.data.rules == 1){
			ElMessage.error("修改公司名称失败！")
		}else{
			ElMessage({
				message:"修改公司名称成功！",
				type:"success"
			})
		}
	}
	const editorPw = ref();
	// 修改公司信息
	const openEditor = (id:number) => {
		console.log(editorPw,123)
		bus.emit("editorTitle",id)
		editorPw.value.open();
	}
	
	// 首页轮播图
	const swiperData = [{
		name:"swiper1"
	},{
		name:"swiper2"
	},{
		name:"swiper3"
	},{
		name:"swiper4"
	},{
		name:"swiper5"
	},{
		name:"swiper6"
	}];
	const imageUrl = ref();
	const handleSwiperSuccess:UploadProps['onSuccess'] = (response,uploadFile)=>{
		if(response.status == 0){
			getAllSwiper1();
		}else{
		}
	}
	// 获取全部轮播图
	const getAllSwiper1 = async ()=>{
		const res = await getAllSwiper();
		imageUrl.value = res.data.list
		console.log(imageUrl,111)
	}
	getAllSwiper1();
</script>

<style lang="scss" scoped>
	// 外壳
	.common-wrapped {
		padding: 8px;
		background: #f5f5f5;
		// 计算 减去了头部还有面包屑 + 2X8=16边距
		height: calc(100vh - 101px);

		// 内容
		.common-content {
			padding: 0 10px;
			height: 100%;
			background: #fff;
			overflow-y: auto;

			// 账号信息外壳
			.account-info-wrapped {
				display: flex;
				align-items: center;
				padding-left: 50px;
				margin-bottom: 24px;
				font-size: 14px;

				// 账号信息内容
				.account-info-content {
					margin-left: 24px;
					margin-right: 16px;
					.el-select{
						width: 100px;
					}
				}

				// 按钮
				.account-save-button {
					margin-left: 16px;
				}
			}

			// 首页管理外壳
			.home-wrapped {
				padding-left: 50px;
				display: flex;
				flex-direction: column;

				// 提示
				.tips {
					display: flex;
					align-items: center;
					margin-bottom: 8px;

					span {
						font-size: 14px;
						color: silver;
					}
				}

				// 轮播图
				.swiper-wrapped {
					display: flex;
					margin-bottom: 16px;

					// 轮播图名字
					.swiper-name {
						font-size: 14px;
						margin-bottom: 24px;
					}

					.swiper {
						width: 336px;
						height: 96px;

					}
				}
			}
		}
	}

	// 其他设置
	.other-set {
		padding-left: 50px;
		font-size: 14px;

		.department-set {
			margin-bottom: 24px;

			span {
				margin-right: 24px;
			}
		}
		
		.product-set {
			
			span {
				margin-right: 24px;
			}
		}
	}

	// 标签页
	.demo-tabs>.el-tabs__content {
		padding: 32px;
		color: #6b778c;
		font-size: 32px;
		font-weight: 600;
	}

	// 上传头像
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	// 输入框的长度
	:deep(.el-input) {
		width: 240px;
	}
</style>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
</style>